<template>
  <div class="m_defined">
    <div class="md_buy">
      <div class="sp1">
        <span>多单分组</span>
      </div>
      <div class="list">
        <div class="group_item " v-for="(item ,index) in group_buy" :key="index"  v-if="index % 2 == 0">
          <a  class="group_item_1"  :class="{custom_choseNav:group_buy[index].selectCount>0}" @click="defined_choosely(index,group_buy[index])">
            {{group_buy[index].group}} ({{group_buy[index].selectCount}}/{{group_buy[index].count}})
          </a>
          <a  class="group_item_2"  :class="{custom_choseNav:group_buy[index+1].selectCount>0}" @click="defined_choosely(index+1,group_buy[index+1])">
            {{group_buy[index+1].group}} ({{group_buy[index+1].selectCount}}/{{group_buy[index+1].count}})
          </a>
        </div>
      </div>
    </div>
    <div class="d1"></div>
    <div class="md_sell">
      <div class="sp1">
        <span>空单分组</span>
      </div>
      <div class="list">
        <div class="group_item " v-for="(item ,index) in group_sell" :key="index"  v-if="index % 2 == 0">
          <a  class="group_item_1"  :class="{custom_choseNav:group_sell[index].selectCount>0}" @click="defined_choosely(index,group_sell[index])">
            {{group_sell[index].group}} ({{group_sell[index].selectCount}}/{{group_sell[index].count}})
          </a>
          <a  class="group_item_2"  :class="{custom_choseNav:group_sell[index+1].selectCount>0}" @click="defined_choosely(index+1,group_sell[index+1])">
            {{group_sell[index+1].group}} ({{group_sell[index+1].selectCount}}/{{group_sell[index+1].count}})
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapMutations,mapGetters } from 'vuex'
    export default {
        name: "run_group_select",
      data(){
        return{
          data_group_id_run:[],  //已启动策略分组
          list_strategy_run:[], //已启动策略
          group_buy:[], //多单组
          group_sell:[],//空单组
          run_select_Ids:[], //已启动选中id
        }
      },
      methods:{
        ...mapMutations([
          'set_run_select_Ids',
          'set_select_id_lock',
        ]),
        ...mapGetters([
          'get_list_strategy_run',
          'get_data_group_id_run',
          'get_run_select_Ids',
        ]),
        //初始化多空分组
        getBuySellGroup(group_list){
          this.group_buy = [];
          this.group_sell = [];
          var patt = /空/;
          group_list.forEach(
            (res) =>{
              if(patt.test(res.group)){
                this.group_sell.push(res);
              }else {
                this.group_buy.push(res);
              }
            }
          )
        },
        //自定义选择
        defined_choosely(n,item){
          let setObj = new Set(this.run_select_Ids);
          //如果没分组没全选就全勾上，全选了就全取消
          if(item.count != item.selectCount){
            this.list_strategy_run.forEach(
              (res) =>{
                if(res.group_id_pro === item.group){
                  setObj.add(res.strategy_id)
                }
              }
            )
          }else{
            this.list_strategy_run.forEach(
              (res) =>{
                if(res.group_id_pro === item.group){
                  setObj.delete(res.strategy_id)
                }
              }
            )
          }
          // this.set_select_id_lock(true);//这里是告诉bottom不要再执行勾选事件
          this.run_select_Ids =Array.from(new Set(setObj));
          this.SelectionCount();
          this.set_run_select_Ids(this.run_select_Ids);
        },
        SelectionCount(){
          var groups_map =new Map();
          if(this.list_strategy_run.length>0 || this.run_select_Ids.length === 0){   //在已启动中查询
            this.list_strategy_run.forEach((row) =>{
              for(var i = 0; i<this.run_select_Ids.length;i++){
                if(row.strategy_id === this.run_select_Ids[i]){
                  if(!groups_map.has(row.group_id_pro)){  //没有就初始化0
                    groups_map.set(row.group_id_pro,0)
                  }
                  groups_map.set(row.group_id_pro,groups_map.get(row.group_id_pro)+1); //不管有没有都加一
                  break;
                }
              }
            });
            //遍历自定义分组，如果map里有自定义分组名字有对应的key，就设置为对应勾选数量
            this.data_group_id_run
              .map(
                function(current, index, array){
                  if(groups_map.has(current.group)) {
                    current['selectCount'] = groups_map.get(current.group);
                    return current
                  }else{
                    current['selectCount'] = 0;
                  }
                });
          }else {
            this.data_group_id_run
              .map(
                function(current, index, array){
                  current['selectCount'] =0;
                  return current
                });
          }
        }, //根据勾选id获取各分组勾选数量并亮起按钮
      },
      created(){
        this.list_strategy_run = this.get_list_strategy_run();
        this.data_group_id_run = this.get_data_group_id_run();
        this.run_select_Ids = this.get_run_select_Ids();
        this.getBuySellGroup(this.data_group_id_run);
      },
      computed:{
        computed_data_group_id_run(){
          return this.get_data_group_id_run()
        },
        computed_list_strategy_run(){
          return this.get_list_strategy_run()
        },
        computed_run_select_Ids(){
          return this.get_run_select_Ids()
        },
      },
      watch:{
        computed_list_strategy_run(){
          this.list_strategy_run = this.get_list_strategy_run();
        },
        computed_data_group_id_run(){
          this.data_group_id_run = this.get_data_group_id_run();
          this.getBuySellGroup(this.data_group_id_run);
          this.SelectionCount()
        },
        computed_run_select_Ids(){
          this.run_select_Ids = this.get_run_select_Ids();
          this.SelectionCount();
        },
      },
    }
</script>

<style scoped lang="less">
  .m_defined{
    position: relative;
    display: flex;
    .sp1{
      width: 34px;
      height: 90px;
      padding-top: 5px;
      padding-left: 8px;
      padding-right: 2px;
      margin-left: 10px;
      margin-bottom: 10px;
      border-left: 1px solid #A6D5FF;
      font-size: 14px;
      color: #FFFFFF;
    }
    .list{
      user-select: none;
      margin-left: 12px;
      display: flex;
      flex-wrap: wrap;
      .group_item{
        a{
          display: block;
          margin: 0 6px;
          padding: 6px 20px;
          border-radius: 2px;
        }
        .group_item_1{
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
        }
        .group_item_2{
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
    .md_buy{
      display: flex;
      width: 50%;
      .list{
        user-select: none;
        margin-left: 12px;
        display: flex;
        flex-wrap: wrap;
        .group_item{
          .group_item_1.custom_choseNav{
            border-color: #E8934D;
            background-color: #E8934D;
            color:  #FFFFFF;
          }
          .group_item_2.custom_choseNav{
            border-color:  #3FCECB;
            background-color:  #3FCECB;
            color:  #FFFFFF;
          }
        }
      }
    }
    .md_sell{
      width: 50%;
      display: flex;
      .list{
        user-select: none;
        margin-left: 12px;
        display: flex;
        flex-wrap: wrap;
        .group_item{
          .group_item_1.custom_choseNav{
            border-color: #E86C4D;
            background-color: #E86C4D;
            color:  #FFFFFF;
          }
          .group_item_2.custom_choseNav{
            border-color: #3FA9CE;
            background-color: #3FA9CE;
            color:  #FFFFFF;
          }
        }
      }
    }
    .d1{
      position:absolute;
      left:50%;
      /*top:10px;*/
      z-index:1;
      height: 96%;
      float: right;
    }
  }
</style>
